<template>
  <!-- 识别结果 -->
  <view id="container" style="width: 100%; height: 100%">
    <view class="identify-results">
      <view class="title">识别结果</view>
      <view class="content">
        <image v-if="detail.face_img.indexOf('https') !== -1" :src="detail.face_img || 'https://z3.ax1x.com/2021/09/02/hD62od.jpg'" class="img" mode="aspectFill"></image>
        <image  v-else :src="vuex_api_HEADER + detail.face_img || 'https://z3.ax1x.com/2021/09/02/hD62od.jpg'" class="img" mode="aspectFill"></image>
        <view class="info">
          <text>姓名：{{ detail.name }}</text>
          <text class="gender">性别：{{ detail.sex == 1 ? '男' : '女' }}</text>
          <text>年龄：{{ detail.age }}</text>
        </view>
      </view>
    </view>
    <view class="btn" @click="to_dial">
      <image src="../../static/sweep-face/bddh.png" class="icon"></image>
      <text>点击拨打家属电话</text>
    </view>

    <!-- 弹窗控制 -->
    <!-- 弹窗控制 -->
    <u-action-sheet :list="txt_list" v-model="show_dial" @click="dial_now" style="position: absolute"></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: [],
      phone_list: [],
      txt_list: [],
      show_dial: false
    }
  },
  onLoad(op) {
    let data = JSON.parse(op.data)
    this.detail = data
    let phone = data.mobile
    for (var i = 0; i < phone.length; i++) {
      this.phone_list.push(phone[i])
      this.txt_list.push({
        text: `联系电话${i + 1}`
      })
    }
  },
  methods: {
    // 弹出电话号码
    to_dial() {
      this.show_dial = true
    },
    // 立即拨打电话
    dial_now(index) {
      let self = this
      let id = this.phone_list[index]
      // 获取虚拟号
      this.$u.api
        .get_virtual_phone_number({
          id: id
        })
        .then((res) => {
          if (res.code != 200) {
            self.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            })
          } else {
            uni.makePhoneCall({
              phoneNumber: res.data.mobile,
              success: (res) => {},
              // 失败回调
              fail: (res) => {
                self.$refs.uToast.show({
                  title: ' 拨打失败 ',
                  type: 'error'
                })
              }
            })
          }
        })
    }
  }
}
</script>

<style lang="scss">
#container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  .identify-results {
    width: 633rpx;
    height: 662rpx;
    border-radius: 10rpx;
    box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(112, 112, 112, 0.4);
    overflow: hidden;
    margin: 0 auto;
    margin-top: 53rpx;
    margin-bottom: 115rpx;

    .title {
      font-size: 30rpx;
      color: #fff;
      background: #2fc3d0;
      padding: 20rpx 0 14rpx 37rpx;
    }

    .content {
      text-align: center;

      .img {
        width: 523rpx;
        height: 461rpx;
        border-radius: 5rpx;
        margin-top: 21rpx;
        margin-bottom: 30rpx;
      }

      .info {
        font-size: 30rpx;

        .gender {
          margin: 0 60rpx 0 60rpx;
        }
      }
    }
  }

  .btn {
    width: 496rpx;
    height: 97rpx;
    background: linear-gradient(90deg, #fedd21, #28f3db, #1675fc);
    border-radius: 10rpx;
    font-size: 40rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    .icon {
      width: 72rpx;
      height: 74rpx;
      margin-right: 34rpx;
    }
  }
}
</style>
